<template>
  <div class="table_layout ">
    <div class="table_title" flex="main:justify cross:center">
      <div flex>
        <p>创建人：{{ tableData.creator || '--' }}</p>
        <p style="margin-left:20px">创建时间：{{ tableData.createTime || '--' }}</p>
      </div>
      <div>
        <template v-if="!patternIsEdit">
          <el-button class="margin_left_10" type="primary" plain size="mini" @click="showShare = true">分享</el-button>
          <el-button class="margin_left_10" size="mini">打印</el-button>
          <el-button v-if="$store.state.archives.flag !== 2" class="margin_left_10" size="mini" type="warning" plain @click="patternIsEdit = true">编辑</el-button>
        </template>
        <template v-else>
          <el-button class="margin_left_10" size="mini" plain type="success" :loading="loading" @click="handleSave">保存</el-button>
          <el-button class="margin_left_10" size="mini" plain type="danger" @click="handleGetData">取消</el-button>
        </template>
      </div>
    </div>
    <div class="table_containter">
      <div class="container_title">
        <p>{{ $store.state.user.departmentName }}</p>
        <h1>火灾损失统计表</h1>
      </div>
      <table border="1" cellspacing="0" cellpadding="0" class="table_content">
        <tr>
          <th colspan="2">起火单位（个人）</th>
          <td colspan="6">
            <input v-if="patternIsEdit" v-model="tableData.unit" type="text">
            <span v-else>{{ tableData.unit }}</span>
          </td>
          <th colspan="2">报警时间</th>
          <td colspan="2">
            <div v-if="patternIsEdit" flex="dir:top main:center" class="box" style="padding-left:0">
              <input v-model="tableData.alarmTimeDate" style="border:none;background-color: #f0f0f0;width:100%" type="date">
              <input v-model="tableData.alarmTimeTime" style="border:none;background-color: #f0f0f0;width:100%" type="time">
            </div>
            <span v-else>{{ tableData.alarmTime }}</span>
          </td>
        </tr>
        <tr>
          <th colspan="2">起火地址</th>
          <td colspan="10">
            <input v-if="patternIsEdit" v-model="tableData.address" type="text">
            <span v-else>{{ tableData.address }}</span>
          </td>
        </tr>
        <tr>
          <th>序号</th>
          <th colspan="3">受损单位</th>
          <th colspan="2">建构筑物及装修损失（元）</th>
          <th colspan="2">设备及其他财产损失（元）</th>
          <th colspan="2">文物建筑损失（元）</th>
          <th colspan="2">损失合计（元）</th>
        </tr>
        <tr v-for="(item,index) in tableData.lossListObj" :key="index+'a'">
          <td>{{ index+1 }}</td>
          <td v-for="(value,key,i) in item" :key="key" :colspan="!i?3:2">
            <input v-if="patternIsEdit" v-model="item[key]" type="number">
            <span v-else>{{ item[key] }}</span>
          </td>
          <td colspan="2">{{ (parseInt(item.lossFitment)||0) + (parseInt(item.lossDevice)||0) + (parseInt(item.lossCultural)||0)||'' }}</td>
        </tr>
        <tr>
          <td rowspan="4">直接经济损失统计</td>
          <td colspan="3">直接财产损失（元）</td>
          <td colspan="8">
            <input v-if="patternIsEdit" v-model="tableData.directLoss" type="number">
            <span v-else>{{ (parseInt(tableData.directLoss) || 0)|moneyToChinese }}</span>
          </td>
        </tr>
        <tr>

          <td colspan="3">人身伤亡后所支出的费用（元）</td>
          <td colspan="8">
            <input v-if="patternIsEdit" v-model="tableData.casualtiesCost" type="number">
            <span v-else>{{ (parseInt(tableData.casualtiesCost) || 0) | moneyToChinese }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">善后处理费用（元）</td>
          <td colspan="8">
            <input v-if="patternIsEdit" v-model="tableData.aftercareCost" type="number">
            <span v-else>{{ (parseInt(tableData.aftercareCost) || 0) | moneyToChinese }}</span>
          </td>
        </tr>
        <tr>
          <td colspan="3">总计（元）</td>
          <td colspan="8">{{ totalCost | moneyToChinese }}</td>
        </tr>
        <tr>
          <td colspan="4">人员伤亡情况</td>
          <td colspan="3">
            <div class="box" style="background:none" flex="main:center cross:center">
              死亡
              <input v-if="patternIsEdit" v-model="tableData.death" style="width:50px" class="custom_input" type="number">
              <span v-else>{{ parseInt(tableData.death)||0 }}</span>人
            </div>
          </td>
          <td colspan="3">
            <div class="box" style="background:none" flex="main:center cross:center">
              重伤
              <input v-if="patternIsEdit" v-model="tableData.seriousInjury" style="width:50px" class="custom_input" type="number">
              <span v-else>{{ parseInt(tableData.seriousInjury)||0 }}</span>人
            </div>
          </td>
          <td colspan="2">
            <div class="box" style="background:none" flex="main:center cross:center">
              轻伤
              <input v-if="patternIsEdit" v-model="tableData.slightInjury" style="width:50px" class="custom_input" type="number">
              <span v-else>{{ parseInt(tableData.slightInjury)||0 }}</span>人
            </div>
          </td>
        </tr>
        <tr>
          <td rowspan="2" colspan="6">
            <p class="text_align_left padding_left_10">统计人（签名）
              <input v-if="patternIsEdit" v-model="tableData.statistics" class="custom_input" type="number">
              <span v-else>{{ tableData.statistics }}</span>
            </p>
            <p class="text_align_right padding_right_10">
              <input v-if="patternIsEdit" v-model="tableData.statisticalDate" class="custom_input" type="date">
              <span v-else>{{ tableData.statisticalDate }}</span></p>
          </td>
          <td rowspan="2" colspan="6">
            <p class="text_align_left padding_left_10">审批人（签名）
              <input v-if="patternIsEdit" v-model="tableData.approver" class="custom_input" type="number">
              <span v-else>{{ tableData.approver }}</span>
            </p>
            <p class="text_align_right padding_right_10">
              <input v-if="patternIsEdit" v-model="tableData.approveDate" class="custom_input" type="date">
              <span v-else>{{ tableData.approveDate }}</span>
            </p>
          </td>
        </tr>
      </table>
      <p class="margin_top_20">此文书由公安机关消防机构存档</p>
    </div>
    <!-- <transition name="el-zoom-in-center">
      <div v-show="patternIsEdit" class="table_shade" />
    </transition> -->

    <shareComponent v-model="showShare" />
  </div>

</template>

<script>
import { parseTime } from '@/utils/time'
import { moneyToChinese } from '@/utils/index'
// import { requestSave, requestGetById } from '@/api/home'
import shareComponent from './share'
export default {
  components: { shareComponent },
  filters: {
    moneyToChinese
  },
  data() {
    const lossListObj = Array.from({ length: 7 }).map(item => {
      const obj = {
        org: undefined,
        lossFitment: undefined,
        lossDevice: undefined,
        lossCultural: undefined
      }
      return obj
    })
    return {
      showShare: false,
      patternIsEdit: false,
      loading: false,
      url: '/loss',
      tableData: {
        'address': 'string',
        'aftercareCost': undefined,
        'approveDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTime': parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
        'alarmTimeDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'alarmTimeTime': parseTime(new Date(), '{h}:{i}'),
        'approver': 'string',
        'casualtiesCost': undefined,
        'death': undefined,
        'directLoss': undefined,
        'id': 0,
        'lossList': 'string',
        'seriousInjury': undefined,
        'slightInjury': undefined,
        'statisticalDate': parseTime(new Date(), '{y}-{m}-{d}'),
        'statistics': 'string',
        'totalCost': 0,
        'unit': 'string',
        lossListObj
      }
    }
  },
  computed: {
    totalCost() {
      return (parseInt(this.tableData.casualtiesCost) || 0) + (parseInt(this.tableData.aftercareCost) || 0) + (parseInt(this.tableData.directLoss) || 0)
    }
  },
  created() {
    this.handleGetData()
  },
  methods: {
    handleSave() {
      const formData = JSON.parse(JSON.stringify(this.tableData))
      formData.archivesId = this.$route.query.archivesId
      formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
      formData.lossList = JSON.stringify(formData.lossListObj)
      formData.approveDate = `${formData.approveDate} 00:00:00`
      formData.statisticalDate = `${formData.statisticalDate} 00:00:00`
      formData.title = '火灾损失统计表'
      requestSave(formData, this.url).then(res => {
        this.$message.success('操作成功')
        this.$router.replace({ path: this.$route.path, query: { itemId: res.data, ...this.$route.query, isEdit: false }})
        this.handleGetData()
      })
    },
    handleGetData(come) {
      const itemId = this.$route.query.itemId
      this.patternIsEdit = come ? false : JSON.parse(this.$route.query.isEdit || 'false')
      if (!itemId) return
      requestGetById({ id: itemId }, this.url).then(res => {
        const formData = res.data
        const [alarmTimeDate, alarmTimeTime] = formData.alarmTime.split(' ')
        formData.alarmTimeDate = alarmTimeDate
        formData.alarmTimeTime = alarmTimeTime
        formData.alarmTime = `${formData.alarmTimeDate} ${formData.alarmTimeTime}:00`
        formData.lossListObj = JSON.parse(formData.lossList)
        formData.approveDate = parseTime(formData.approveDate, '{y}-{m}-{d}')
        formData.statisticalDate = parseTime(formData.statisticalDate, '{y}-{m}-{d}')
        const lossListObj = this.tableData.lossListObj
        formData.lossListObj = lossListObj.map((item, index) => {
          Object.keys(item).forEach(key => {
            item[key] = formData.lossListObj[index][key]
          })
          return item
        })
        this.tableData = formData
      })
    }

  }
}
</script>

